<template>
  <!-- start:自定义页面内容 患者信息录入-->
  <div>
    <el-dialog title="填写电话号码" :visible.sync="showPhoneNumberInput" :before-close="handleClose">
      <el-row style="padding:0;font-size:20px;color:blue;">
        <el-col :span="10">
          <span style="font-size:16px;color:grey;">姓名:</span>
          <span>{{this.name}}</span>
        </el-col>
        <el-col :span="10">
          <span style="font-size:16px;color:grey;">医保卡号:</span>
          <span>{{this.ssCardNo}}</span>
        </el-col>
      </el-row>
      <el-row style="font-size:20px;color:blue;">
        <el-col :span="24">
          <span style="font-size:16px;color:grey;">身份证号码:</span>
          <span>{{this.idNo}}</span>
        </el-col>
      </el-row>
      <el-row id="phone_row">
        <el-col :span="18" :offset="3">
          <el-input v-model="PhoneNumber" autocomplete="off" placeholder="请输入手机号">
            <template slot="prepend">手机号:</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" :offset="7">
          <!-- <div id="keypanel">
            <ul id="keyboard">
              <li class="letter" @click="OnKey(1)">1</li>
              <li class="letter" @click="OnKey(2)">2</li>
              <li class="letter" @click="OnKey(3)">3</li>
              <li class="letter" @click="OnKey(4)">4</li>
              <li class="letter" @click="OnKey(5)">5</li>
              <li class="letter" @click="OnKey(6)">6</li>
              <li class="letter" @click="OnKey(7)">7</li>
              <li class="letter" @click="OnKey(8)">8</li>
              <li class="letter" @click="OnKey(9)">9</li>
              <li class="letter lastone" @click="OnKey(0)">0</li>
              <li class="del" @click="OnKey(-1)">删</li>
            </ul>
          </div> -->
          <div class="key-pad" style="width:240px;height:300px;margin:20px 0 0 0;">
            <Keypad @OnKey="OnKey"/>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnCancel">取 消</el-button>
        <el-button type="primary" @click="OnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <!-- end:自定义页面内容 -->
</template>

<script>
import moment from "moment";
import { MessageBox } from "element-ui";
import { commonPost } from "@api/data";
import Keypad from '@/components/common/Keypad.vue'
export default {
  name: "Reguser",
  components: {
    Keypad
  },
  props: {
    miCardInfo: Object,
    cardType: ""
  },
  data() {
    return {
       ybinfo:[],
       name:"",
       idNo:"",
       ssAccount:"",
       ssCardNo:"",
       sex:"",
       birthDate:"",
       address:"",
       cardNo:"",
       ssType:"",
      phone: "",
      patientId:"",
      PhoneNumber: "",
      showPhoneNumberInput: true,
      userinfo: this.ybinfo
    };
  },
  methods: {
    handleClose() {
      this.$confirm("确认退出建档?")
        .then(_ => {
          this.$router.push({ name: "home" });
        })
        .catch(_ => {
          return;
        });
    },
    OnKey(num) {
      if (num != -1) {
        if (this.PhoneNumber.length < 11) {
          this.PhoneNumber += num;
        }
      } else {
        if (this.PhoneNumber.length > 1) {
          this.PhoneNumber = this.PhoneNumber.substr(
            0,
            this.PhoneNumber.length - 1
          );
        } else {
          this.PhoneNumber = "";
        }
      }
    },
    OnOk() {
      if (this.PhoneNumber == "") {
        MessageBox.alert("请输入手机号");
        return;
      } else if (this.PhoneNumber.length < 11) {
        MessageBox.alert("请输入正确的手机号");
        return;
      }
      if(this.cardType=="3"){
        this.sfzreg()
      }else{
        this.sbkreg()
      }
    },
    OnCancel() {
      this.$router.push({ name: "home" });
    },
    load(){
      console.log("---miCardInfo---", this.miCardInfo,"卡类型",this.cardType)
      if(this.cardType=="2"){
        console.log("读医保卡建档")
        var outStr = this.miCardInfo.split("^")[2];
        var outParams = outStr.split("|");
        this.ybinfo=outParams;
        let orginfo = this.$store.state.terminfo.orginfo;
        if(orginfo.cmiid==='104'){
          this.name=this.ybinfo[3];
          this.idNo=this.ybinfo[2];
          this.sex=this.ybinfo[4];
          this.birthDate=this.ybinfo[6]
          this.ssCardNo=this.ybinfo[7];
          this.ssType=this.ybinfo[8];
          this.address="延吉市";
        }
        else{
          this.name=this.ybinfo[2];
          this.idNo=this.ybinfo[1];
          this.sex=this.ybinfo[3];
          this.birthDate=this.ybinfo[4]
          this.ssCardNo=this.ybinfo[5];
          this.ssType=this.ybinfo[8];
          this.address="九台市";
        }
      }else{ // 身份证查无此人
        console.log("读身份证建档")
        this.name=this.miCardInfo.Name
        this.idNo=this.miCardInfo.ID
        this.sex=this.miCardInfo.Sex
        this.birthDate=this.miCardInfo.Birthday
        this.address=this.miCardInfo.Address
      }
    },
    async sbkreg() {
      let data = {};
      data.url = "/api/RegPatientInfo";
      data.payload = {
        name: this.name,
        sex:  this.sex,
        birthDate: this.birthDate,
        phone: this.PhoneNumber,
        address: this.address,
        cardNo: this.ssCardNo,
        cardType: "4",//注册电子健康卡接口会直接注册his
        idNo: this.idNo,
        idType: "01",
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo
      };
      commonPost(data).then(res => {
        // let url = res.data.qrcode;
        this.patientId = res.data.patientId;
        //电子健康卡注册完成后转换病人性质为医保
        this.updatepatinfo();
        // this.$emit("RegedSbkCard", this.ybinfo);
      });
    },
    async updatepatinfo() {
      let data = {};
      data.url = "/api/UpdatePatientInfo";
      data.payload = {
        patientId: this.patientId,
        ssCardNo:this.ssCardNo,
        name: this.name,
        idNo: this.idNo,
        cardNo:this.idNo,
        updateType:"0",
        chargeType: "02",
        chargeType01:  this.ssType,
        ssPersonaldNo: this.ybinfo[0],
        termId: this.$store.state.terminfo.terminfo.termId,
        hisOperNo: this.$store.state.terminfo.terminfo.hisOperNo,
        miCardInfo: this.miCardInfo,
      };
      commonPost(data).then(res => {
        //电病人性质转为医保后回到读卡完成
        this.$emit("RegedSbkCard", this.ybinfo);
      });
    },
    // 身份证查无此人
    sfzreg(){
      this.$emit("regPatient", this.PhoneNumber);
    }
  },
  mounted() {
    this.load();
    this.$nextTick(function() {
      this.$refs.autofocus.focus();
    });
  }
};
</script>

<style scoped>
#phone_row {
  margin: 25px 0 0 0;
}

#keypanel {
  background-color: rgb(188, 190, 192);
  width: 150px;
  height: 187px;
}

#keyboard {
  margin: 0 5px 0 5px;
  padding: 0;
  list-style: none;
  color: #2b587a;
}

#keyboard li {
  float: left;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #fff;
  border: 1px solid #f9f9f9;
  border-radius: 5px;
}

.letter {
  margin: 2px 2px 2px 2px;
  font-family: tahoma, arial, verdana, sans-serif, "Lucida Sans";
  font-size: 22px;
  font-weight: bold;
}

.del {
  margin: 2px 2px 2px 2px;
  font-family: tahoma, arial, verdana, sans-serif, "Lucida Sans";
  font-size: 22px;
  font-weight: bold;
}

.lastone {
  margin: 2px 2px 2px 48px;
  font-family: tahoma, arial, verdana, sans-serif, "Lucida Sans";
  font-size: 22px;
  font-weight: bold;
}
</style>
